<template>
  <div class="addshop">
    <div class="addshop_top">
      <el-steps :active="active" finish-status="success">
        <el-step title="1.商品信息"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="步骤 3"></el-step>
      </el-steps>
    </div>
    <component :is="changeName" ref="activeComponent"></component>
    <div class="addshop_bottom">
      <el-button
        style="margin-top: 12px;"
        @click="prevFn()"
        v-if="active > 1"
        type="primary"
        >上一步</el-button
      >
      <el-button style="margin-top: 12px;" @click="next()" type="primary"
        >下一步</el-button
      >
      <el-button style="margin-top: 12px;" @click="submite" type="primary"
        >提交</el-button
      >
	  <el-button sty></el-button>
    </div>
  </div>
</template>
<script>
import Theforms from "./Theforms.vue";
import Thetwo from "./Thetwo.vue";
import Thethree from "./Thethree.vue";
export default {
  data() {
    return {
      active: 1,
      changeName: "Theforms",
      obj: {}
    };
  },
  components: {
    Theforms,
    Thetwo,
    Thethree
  },
  methods: {
    prevFn() {
      switch (this.active) {
        case 3:
          this.active = 2;
          this.changeName = "Thetwo";
          break;
        case 2:
          this.active = 1;
          this.changeName = "Theforms";
          break;
      }
    },
    next() {
      switch (this.active) {
        case 0:
          this.active += 1;
          this.changeName = "Theforms";
          break;
        case 1:
          this.active += 1;
          this.changeName = "Thetwo";
          break;
        case 2:
          this.active += 1;
          this.changeName = "Thethree";
          break;
      }
    },
    submite() {
	  console.log(this.obj);
	  this.$router.push("/kill/index2/barteringGoods");
    }
  }
};
</script>
<style lang="scss" scoped>
.addshop {
  width: 100%;
  height: 100%;
  .addshop_top {
  }
  .addshop_bottom {
    margin-top: 50px;
  }
}
</style>
